<template>
  <div class="stay-container scroll-box">
    <div
      class="search-box"
      v-if="ifType===5"
    >
      <form action="/">
        <van-search
          v-model="searchOptions.searchKey"
          show-action
          shape="round"
          placeholder="搜索工单编号"
          @search="searchOptions.handleSearch"
          @clear='searchOptions.handleSearch'
        >
          <template #action>
            <div
              class="filter-box"
              @click="searchOptions.handleFilter"
            >
              <i class="iconfont iconshaixuan"></i>
              <span>筛选</span>
            </div>
          </template>
        </van-search>
      </form>
    </div>
    <!-- 待处理，待接单工单 -->
    <div
      class="stay-device-box"
      @click="onOpenStayWorkDetail(list.id,list.maintain_plan_id)"
      v-for="list in listData"
      :key="list.id"
      v-show="ifType===2||ifType===3"
    >
      <div class="stay-work-box">
        <div
          class="stay-work-icon-box"
          v-if="list.order_type===1"
        >
          <i class="iconfont iconweixiugongdan stay-icon-color"></i>
        </div>
        <div
          class="stay-work-icon-box stay-work-icon-box-green"
          v-else
        >
          <i class="iconfont iconbaoyanggongdan1  stay-icon-color stay-icon-color-green "></i>
        </div>
        <div class="stay-reight">
          <div class="stay-reight-box">
            <p class="stay-reight-text-left">{{list.order_no}}</p>
            <p class="stay-reight-text-reight">{{list.updated_time}}</p>
          </div>
          <p class="stay-reight-text-bootem">设备编号：{{list.device_number}}</p>
        </div>
      </div>
    </div>
    <!-- <div class="stay-device-box">
      <div class="stay-work-box">
        <div class="stay-work-icon-box stay-work-icon-box-green">
          <i class="iconfont iconbaoyanggongdan1  stay-icon-color stay-icon-color-green "></i>
        </div>
        <div class="stay-reight">
          <div class="stay-reight-box">
            <p class="stay-reight-text-left">工单2021041130001</p>
            <p class="stay-reight-text-reight">2020/05/14 18:14:32</p>
          </div>
          <p class="stay-reight-text-bootem">设备编号：SN1234567891</p>
        </div>
      </div>
    </div> -->

    <!-- 全部工单 -->
    <div
      class="stay-whole-box"
      v-for="(list,index) in listData"
      :key="index"
      v-show="ifType===4||ifType===5"
    >
      <div
        class="stay-whole-work-box"
        @click="onOpenStayWorkDetail(list.id,list.maintain_plan_id)"
      >
        <div
          class="stay-whole-work-icon-box"
          v-if="list.order_type===1"
        >
          <i class="iconfont iconweixiugongdan stay-whole-icon-color"></i>
        </div>
        <div
          class="stay-whole-work-icon-box stay-work-icon-box-green"
          v-else
        >
          <i class="iconfont iconbaoyanggongdan1 stay-whole-icon-color stay-icon-color-green"></i>
        </div>
        <div class="stay-whole-reight">
          <div class="stay-whole-reight-top">
            <p class="stay-whole-reight-text-left">{{list.order_no}}</p>
            <div class="stay-whole-reight-text-reight">
              <div
                class="whole-work-state-icon-box"
                v-if="list.status===2"
              >
                <i class="iconfont icondaichuli whole-work-state-icon-color"></i>
              </div>
              <div
                class="whole-work-state-icon-box whole-work-state-icon-box-C5DF5D"
                v-if="list.status===3"
              >
                <i class="iconfont iconxiayi whole-work-state-icon-color"></i>
              </div>
              <div
                class="whole-work-state-icon-box whole-work-state-icon-box-81E4A9"
                v-if="list.status===4"
              >
                <i class="iconfont icontianjiawancheng whole-work-state-icon-color"></i>
              </div>
              <div
                class="whole-work-state-icon-box whole-work-state-icon-box-F4A476"
                v-if="list.status===5"
              >
                <i class="iconfont iconguanbi-01 whole-work-state-icon-color"></i>
              </div>
              {{typeStatus[list.status-2]}}
            </div>
          </div>
          <p class="stay-reight-text-bootem">设备编号：{{list.device_number}}</p>
          <div class="stay-whole-reight-top">
            <p class="stay-whole-reight-text-bootem">{{list.sourceText}}</p>
            <p class="stay-whole-reight-text-bootem">{{list.updated_time}}</p>
          </div>
        </div>
      </div>
    </div>

    <SearchFilter
      v-show="showFilterOrder"
      @submitSearch="submitFilter"
    />
  </div>
</template>
<script>
import SearchFilter from '../components/SearchFilterEngineer.vue';
import { getOrderListByEngineer } from '@/api/maintenanceEngineer';
import { Progress, Swipe, SwipeItem, Search } from 'vant';

export default {
  components: {
    [Progress.name]: Progress, //进度条
    [Swipe.name]: Swipe, //轮播
    [SwipeItem.name]: SwipeItem,
    [Search.name]: Search,
    SearchFilter
  },
  data() {
    return {
      searchOptions: {
        searchKey: '',
        handleSearch: this.handleSearch,
        handleFilter: this.handleFilter
      },
      showFilterOrder: false,
      typeStatus: ['待接单', '已接单', '已完成', '已取消'],
      ifType: '', //判断是2:待接单，3:待处理，4：已完成，5：全部
      seachData: '', //筛选的值
      listData: '' //列表数据
    };
  },
  // beforeRouteEnter(to, from, next) {
  //   // console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
  //   // console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
  //   // console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
  //   next(vm => {
  //     if (to.query.id === '2') {
  //       to.meta.title = '待接单工单';
  //     } else if (to.query.id === '3') {
  //       to.meta.title = '待处理工单';
  //     } else if (to.query.id === '4') {
  //       to.meta.title = '已完成工单';
  //     } else {
  //       to.meta.title = '全部工单';
  //     }
  //   });
  // },
  mounted() {
    this.ifType = parseInt(this.$route.query.id);
    this.onListData();
  },
  methods: {
    // 搜索
    handleSearch() {
      this.onListData();
    },
    // 筛选
    handleFilter() {
      this.showFilterOrder = true;
    },
    // 确定筛选条件
    submitFilter(parm) {
      this.seachData = parm;
      this.showFilterOrder = false;
      this.onListData();
    },
    // 列表数据
    onListData() {
      let statusValue =
        this.seachData.orderStatus === undefined ? (this.ifType === 5 ? '' : this.ifType) : this.seachData.orderStatus;
      let params = {
        page: 1,
        page_size: 9999,
        status: statusValue,
        order_no: this.searchOptions.searchKey,
        order_type: this.seachData.orderType
      };
      getOrderListByEngineer(params).then(res => {
        res.data.list.map(item => {
          if (item.source === 2 && item.order_type === 1) {
            item.sourceText = '报警转工单';
          } else if (item.source === 2 && item.order_type === 2) {
            item.sourceText = '保养转工单';
          } else if (item.source === 1) {
            item.sourceText = '手动创建';
          } else if (item.source === 3) {
            item.sourceText = '上报工单';
          }
        });
        this.listData = res.data.list;
      });
    },

    //跳转详情页面
    onOpenStayWorkDetail(valId, planId) {
      this.$router.push({
        name: 'stayWorkDetail',
        query: {
          typePage: this.ifType,
          id: valId,
          planId: planId
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.stay-container {
  width: 100%;
  height: 100%;
}
//筛选
.search-box {
  width: 100%;
  height: 1.6rem;
  margin-bottom: 0.213333rem;
  // padding: 0.4rem 0.426667rem;
  background-color: #fff;
  .filter-box {
    display: flex;
    align-items: center;
    font-size: 0.373333rem;
    color: #666666;

    i {
      margin-right: 0.053333rem;
    }
  }
}

//待处理，待接单工单
.stay-device-box {
  width: 100%;
  height: 1.92rem;
  margin-bottom: 0.213333rem;
  padding: 0.4rem 0.426667rem;
  background-color: #fff;

  .stay-work-box {
    display: flex;
  }
  .stay-work-icon-box {
    width: 1.12rem;
    height: 1.12rem;
    background: #ebf1ff;
    border-radius: 0.8rem;
    margin-right: 0.32rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .stay-icon-color {
    color: var(--color-primary);
    font-size: 0.533333rem;
  }

  .stay-reight {
    width: 7.733333rem;
  }
  .stay-reight-box {
    display: flex;
    justify-content: space-between;
  }
  .stay-reight-text-left {
    font-size: 0.4rem;
    color: #333333;
  }
  .stay-reight-text-reight {
    font-size: 0.32rem;
    color: #999999;
  }
  .stay-reight-text-bootem {
    font-size: 0.346667rem;
    color: #666666;
    margin-top: 0.32rem;
  }
}
.stay-icon-color-green {
  color: #67c23a !important;
}
.stay-work-icon-box-green {
  background: #f0f9eb !important;
}

//全部工单
.stay-whole-box {
  width: 100%;
  height: 2.613333rem;
  margin-bottom: 0.213333rem;
  padding: 0.4rem 0.426667rem;
  background-color: #fff;
  .stay-whole-work-box {
    display: flex;
  }
  .stay-whole-work-icon-box {
    width: 1.12rem;
    height: 1.12rem;
    background: #ebf1ff;
    border-radius: 0.8rem;
    margin-right: 0.32rem;
    margin-top: 0.32rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .stay-whole-icon-color {
    color: var(--color-primary);
    font-size: 0.533333rem;
  }
  .stay-whole-reight {
    width: 7.733333rem;
    position: relative;
    padding-left: 0.32rem;
  }
  .stay-whole-reight:before {
    content: '';
    position: absolute;
    top: -0.026667rem;
    left: 0;
    width: 1px;
    height: 1.813333rem;
    background-color: #f2f6fc;
  }

  .stay-whole-reight-top {
    display: flex;
    justify-content: space-between;
  }
  .stay-whole-reight-text-left {
    font-size: 0.4rem;
    color: #333333;
  }
  .stay-whole-reight-text-reight {
    font-size: 0.32rem;
    color: #999999;
    display: flex;
  }
  .whole-work-state-icon-box {
    width: 0.533333rem;
    height: 0.533333rem;
    background: #ffc329;
    border-radius: 0.8rem;
    text-align: center;
    padding-top: 0.08rem;
    padding-left: 1px;
    margin-right: 0.133333rem;
    margin-top: -0.08rem;
  }
  .whole-work-state-icon-box-C5DF5D {
    background: #c5df5d !important;
  }
  .whole-work-state-icon-box-81E4A9 {
    background: #81e4a9 !important;
  }
  .whole-work-state-icon-box-F4A476 {
    background: #f4a476 !important;
  }
  .whole-work-state-icon-color {
    color: #fff;
    font-size: 0.32rem;
  }

  .stay-reight-text-bootem {
    font-size: 0.346667rem;
    color: #666666;
    margin-top: 0.32rem;
    margin-bottom: 0.32rem;
  }
  .stay-whole-reight-text-bootem {
    font-size: 0.32rem;
    color: #999999;
  }
}
</style>